/* component */
import BizChatBarLoading from "@src/component/business/BizChatBar/loading"
import BizChatBarOperate from "@src/component/business/BizChatBar/operate"
/* vue */
import { defineComponent } from "vue"
/* scss */
import '@src/component/business/BizChatBar/header.scss'

enum BizChatBarHeaderEventEnum {
  RETRY = 'retry',
  STOP = 'stop',
  DROP = 'drop',
  USE = 'use',
  SEND = 'send'
}

export default defineComponent({
  name: "BizChatBarHeader",
  props: {
    isAnswering: {
      type: Boolean,
      default: false
    },
    onRetry: {
      type: Function,
    },
    onStop: {
      type: Function,
    },
    onDrop: {
      type: Function,
    },
    onUse: {
      type: Function,
    },
    onSend: {
      type: Function,
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  methods: {
    onRetryHandler() {
      this.$emit(BizChatBarHeaderEventEnum.RETRY)
    },
    onStopHandler() {
      this.$emit(BizChatBarHeaderEventEnum.STOP)
    },
    onDropHandler() {
      this.$emit(BizChatBarHeaderEventEnum.DROP)
    },
    onUseHandler() {
      this.$emit(BizChatBarHeaderEventEnum.USE)
    },
    onSendHandler() {
      this.$emit(BizChatBarHeaderEventEnum.SEND)
    },
    renderLoading() {
      return (
        <BizChatBarLoading
          onRetry={this.onRetryHandler}
          onStop={this.onStopHandler}
        >
        </BizChatBarLoading>
      )
    },
    renderOperate() {
      return (
        <BizChatBarOperate
          onDrop={this.onDropHandler}
          onRetry={this.onRetryHandler}
          onUse={this.onUseHandler}
          onSend={this.onSendHandler}
        >
        </BizChatBarOperate>
      )
    },
    renderContent() {
      // 如果正在回答中，显示加载中
      if (this.isAnswering) {
        return this.renderLoading()
      }
      // 否则显示操作按钮
      return this.renderOperate()
    }
  },
  render() {
    return (
      <div class="biz-chat-bar-header">
        { this.renderContent() }
      </div>
    )
  }
})